﻿<!DOCTYPE html>
<html>
<head>
<title>Twitter In Turkey</title>
    <link rel="stylesheet" type="text/css" href="css/layer.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var totalTweetCount = 0;
        var totalStatusCount = 0;

        var happyCount = 0;
        var unhappyCount = 0;
        var excitedCount = 0;
        var tiredCount = 0;
        var angryCount = 0;

        var happyPercentage = 0;
        var unhappyPercentage = 0;
        var excitedPercentage = 0;
        var tiredPercentage = 0;
        var angryPercentage = 0;

        var turkcellCount = 0;
        var vodafoneCount = 0;
        var aveaCount = 0;

        var ws;

        $(document).ready(
                function () {
                    ws = new WebSocket("ws://localhost:8080/twitter/start");
                    ws.onopen = function (event) {

                    }
                    ws.onmessage = function (event) {
                        totalTweetCount++;

                        var tweetStr = event.data;
                        var latLon = tweetStr.split('|||');
                        var tweetText = latLon[3];

                        var calculate = 'false';

                        if (/mutluyum/i.test(tweetText)) {
                            totalStatusCount++;
                            happyCount++;
                            calculate = 'true';
                        }
                        if (/mutsuzum/i.test(tweetText)) {
                            totalStatusCount++;
                            unhappyCount++;
                            calculate = 'true';
                        }
                        if (/heyecanl&#305;y&#305;m/i.test(tweetText)) {
                            totalStatusCount++;
                            excitedCount++;
                            calculate = 'true';
                        }
                        if (/yorgunum/i.test(tweetText)) {
                            totalStatusCount++;
                            tiredCount++;
                            calculate = 'true';
                        }
                        if(/sinirliyim/i.test(tweetText) || /k&#305;zg&#305;n&#305;m/i.test(tweetText)) {
                            totalStatusCount++;
                            angryCount++;
                            calculate = 'true';
                        }

                        $('#totalTweetCountH4').text(totalTweetCount);

                        if(calculate == 'true') {

                            $('#happyPercentageH2').text(happyCount);
                            $('#unhappyPercentageH2').text(unhappyCount);
                            $('#excitedPercentageH2').text(excitedCount);
                            $('#tiredPercentageH2').text(tiredCount);
                            $('#angryPercentageH2').text(angryCount);
                        }

                    }
                    ws.onclose = function (event) {

                    }
                }
        );


    </script>
</head>
<body>
<div class="fullPage">
	<div class="pageHeader">
		<div class="siluet">
			<a href="#" title="Twitter In Turkey"><img src="images/siluet.png" alt="" width="585" height="122" /></a>
		</div>
	</div>
	<div class="pageStatus">
		<div class="currentStatus">
			<h2 id="maxPercentageH2"></h2>
			<p>Mutlu Hissediyor</p>
		</div>
		<div class="latestTweet">
			<div class="latestTweetPic"><img src="images/latestPic.jpg" alt="" width="67" height="65" /></div>
			<div class="bubble">
				<div class="latestUsername"><p>@username</p><em> diyor ki;</em></div>
				<h3>Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.</h3>
				<h4>From: Istanbul</h4>
			</div>
		</div>
	</div>
	<div class="anotherStatus">
		<div class="smallStatus mutlu">
			<h2 id="happyPercentageH2"></h2>
			<p>Mutlu Hissediyor</p>
		</div>
		<div class="smallStatus mutsuz">
			<h2 id="unhappyPercentageH2"></h2>
			<p>Mutsuz Hissediyor</p>
		</div>
		<div class="smallStatus heyecanlı">
			<h2 id="excitedPercentageH2"></h2>
			<p>Heyecanlı Hissediyor</p>
		</div>
		<div class="smallStatus yorgun">
			<h2 id="tiredPercentageH2"></h2>
			<p>Yorgun Hissediyor</p>
		</div>
		<div class="smallStatus üzgün">
			<h2 id="angryPercentageH2"></h2>
			<p>Kızgın Hissediyor</p>
		</div>
	</div>
	<div class="information">
		<div class="infoBox">
			<h3>total tweet</h3>
			<h4 id="totalTweetCountH4"></h4>
		</div>
		<div class="infoBox">
			<h3>hakkında</h3>
			<p>Twitter’dan anlık olarak çekilen tweetlerin belirli kelimelerle filtrelenmesi sonucu oranlar oluşturulmaktadır. </p>
		</div>
		<div class="infoBox">
			<h3>hesaplama</h3>
			<p>Twitter’dan anlık olarak çekilen tweetlerin belirli kelimelerle filtrelenmesi sonucu oranlar oluşturulmaktadır. </p>
		</div>
	</div>
	<div class="shareThis">
		<a href="#" title="" class="facebook"><p>Linkedin'de Paylaş</p></a>
		<a href="#" title="" class="twitter"><p>Twitter'da Paylaş</p></a>
		<a href="#" title="" class="linkedin"><p>Facebook'ta Paylaş</p></a>
	</div>
	<div class="infoFooter">
		<h4>Last Update : <em>23:42:12</em></h4>
		<p>Nodejs, Twitter API, Symbol Heatmap kullanılarak geliştirilmiştir. Durum fotoğrafları için teşekkürler <a href="" title="">@eydigozeneli</a></p>
		<a href="http://twitter.com/mehmetalp" target="_blank" title="@mehmetalp">@mehmetalp</a>
	</div>
</div>

</body>
</html>